<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网上银行转账系统</title>
    <style>
        .input-val {
            width: 200px;
            height: 32px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }

        #canvas {
            vertical-align: middle;
            box-sizing: border-box;
            border: 1px solid #ddd;
            cursor: pointer;
        }

        .btn {
            display: block;
            margin-top: 20px;
            height: 32px;
            width: 100px;
            font-size: 16px;
            color: #fff;
            background-color: #457adb;
            border: none;
            border-radius: 50px;
        }
    </style>

    <!--1.引入bootstrap样式框架；-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

    <!--2.引入angularJS分页样式的框架；-->
    <link rel="stylesheet" href="../angularjs/pagination.css">

    <link rel="stylesheet" href="../layer/theme/default/layer.css">

    <!--3.引入bootstrap中的Jquery框架；-->
    <script src="../bootstrap/js/jquery.min.js"></script>
    <!--4.引入bootstrap中的Js框架；-->
    <script src="../bootstrap/js/bootstrap.min.js"></script>

    <!--5.引入AngularJS的JS框架-->
    <script src="../angularjs/angular.min.js"></script>

    <!--6.引入AngularJS分布的JS框架-->
    <script src="../angularjs/pagination.js"></script>

    <script src="../layer/layer.js"></script>

    <script src="../angularjs/angular-route.min.js"></script>
    <script src="../angularjs/angular-animate.min.js"></script>

    <script src="../js/mycode.js"></script>

</head>
<body ng-app="obtrApp" ng-init="getcardlist()" ng-controller="obtrCtrl">
<div class="" style="width: 100%">

    <!--最上方小导航栏-->
    <div ng-include=" 'obtop.html' "></div>

    <!--主要导航栏-->
    <div class="navbar navbar-default " role="navigation" style="background-color: white;height: 80px;margin-bottom: 0px;padding-top: 15px">
        <!--navbar-fixed-top-->
        <div class="navbar-header" style="padding-left: 30px;">
            <a class="navbar-brand" href="#" style="padding-top: 0px;padding-left: 150px;">
                <img alt="Brand" src="../imgs/oblogo.png" width="150" height="45">
            </a>

            <a class="navbar-brand" href="#" style="padding-top: 8px">
                <img alt="Brand" src="../imgs/ipv6.png" width="50" height="30">
            </a>
        </div>

        <ul class="nav navbar-nav navbar-right" style="font-size: 15px;font-family:'黑体';padding-right: 150px">
            <li ><a href="../onlinebank.html">首页</a></li>
            <li ><a href="#!/login2">产品中心</a></li>
            <li ><a href="#!/login">安全保障</a></li>
            <li ><a href="obtransfer.html">账户转账</a></li>
            <li ><a href="obdetail.html">账户详情</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
        </ul>
    </div>


    <div class="panel panel-primary">

        <div style="text-align: center">
            <h1>注册账户汇款</h1>

        </div>

        <div class="panel-body">
            <div class="col-md-9 col-md-offset-1">
                <form>

                    <div class="form-group">

                        <div class="form-horizontal">
                            <label for="payerAccount" class="control-label col-md-2">付款银行卡</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <select class="form-control" id="payerAccount" ng-click="cartlist()">
                                    <option value="" selected="selected">所有银行卡</option>
                                    <option ng-repeat="c in clist" value="{{c.obcAccount}}">{{c.obcAccount}}</option>
                                </select>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="fyh" class="control-label col-md-2">付款银行</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="fyh" id="fyh" ng-model="form.fyh" class="form-control" disabled
                                       maxlength="30"
                                       type="text"/><span id="sjh2"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="payeeAccount" class="control-label col-md-2">收款银行卡</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <select class="form-control" id="payeeAccount" ng-click="cartlist()">
                                    <option value="" selected="selected">所有银行卡</option>
                                    <option ng-repeat="c in clist2" value="{{c.obcAccount}}">{{c.obcAccount}}</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="form-horizontal">
                            <label for="syh" class="control-label col-md-2">收款银行</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input name="syh" id="syh" ng-model="form.syh" class="form-control" disabled
                                       maxlength="30"
                                       type="text"/><span id="syh1"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="tradingAmount" class="control-label col-md-2">汇款金额</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="tradingAmount" id="tradingAmount" ng-model="form.tradingAmount"
                                       class="form-control" placeholder="请输入汇款金额" maxlength="8"
                                       type="text"><span id="hkje"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="idtype" class="control-label col-md-2">证件类型</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <select id="idtype" class="form-control">
                                    <option>身份证</option>
                                    <option>居住证</option>
                                    <option>签证</option>
                                    <option>护照</option>
                                    <option>户口本</option>
                                    <option>军人证</option>
                                    <option>团员证</option>
                                    <option>党员证</option>
                                    <option>港澳通行证</option>
                                </select>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="idcard" class="control-label col-md-2">证件号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="idcard" id="idcard" ng-model="form.idcard" class="form-control"
                                       maxlength="30"
                                       type="text"><span id="idcard2"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="name" class="control-label col-md-2">姓名</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="name" id="name" ng-model="form.name" class="form-control" maxlength="20"
                                       type="text"><span id="name2"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="yzm" class="control-label col-md-2">验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="text" id="yzm" value="" class="form-control" placeholder="请输入验证码（不区分大小写）"
                                       class="input-val" style="width: 80%">&nbsp;&nbsp;&nbsp;
                                <canvas id="canvas" width="123" height="30"></canvas>
                                <span id="yzm2"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="payPwd" class="control-label col-md-2">支付密码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="payPwd" id="payPwd" ng-model="form.payPwd" class="form-control"
                                       placeholder="请输入密码" maxlength="30"
                                       type="password"><span id="paypwd2"></span>
                            </div>
                        </div>
                        <br>

                        <div class="form-horizontal">
                            <label for="phone" class="control-label col-md-2">手机号</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="phone" id="phone" ng-model="form.phone" class="form-control" maxlength="30"
                                       style="width: 80%" type="text"><span id="phone2"></span>&nbsp;&nbsp;&nbsp;
                                <input class="form-control" id="sjh" style="width: 16%;margin-left: 17px;color: white;background-color: #40AFFE" value="发送" type="button">
                            </div>

                        </div>
                        <br>
                        <div class="form-horizontal">
                            <label for="phoneCode" class="control-label col-md-2">手机验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input name="phoneCode" id="phoneCode" ng-model="form.phoneCode" class="form-control"
                                       placeholder="请输入手机验证码" maxlength="30"
                                       type="password"><span id="phoneCode2"></span>
                            </div>
                        </div>
                        <br>


                        <div class="form-group">
                            <div class="form-group">
                                <input class="btn btn-primary col-sm-offset-2 col-md-6" id="submit" value="确认"
                                       type="button">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-2" id="submit1"
                                 href="../onlinebank.html"  type="button">取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="panel-footer text-right">
            境内转账
        </div>

    </div>

</div>

<script>
    layerindex = -1;
    var app = angular.module('obtrApp', ['pagination', 'ngRoute']);    //定义一个模块； cityApp

    app.controller("obtrCtrl", function ($scope, $http) {    //定义一个控制器； cityCtrl  ,  $http 调用接口！  http://localhost:8080/citys/list.action
        $scope.id = 0;

        $scope.clist = "";
        $scope.clist2 = "";

        $scope.form = {
            payeeAccount: "",//收款银行卡
            payerAccount: "",//付款银行卡
            syh: "", fyh: "",
            tradingAmount: "",//金额
            idcard: "",
            name: "",//姓名
            phone: "",
            payPwd:"",
            phoneCode:""
        }

        var sessionStorage = window.sessionStorage;
        var obid = window.sessionStorage.getItem("obid");

        //转账
        $scope.pay = function () {
            $http.post("http://localhost:12000/onli/obc/transfer", $scope.form).success(function (data) {  //正确请求成功时处理
                console.log(data);

                if (data.code == 200) {
                    layer.close(layerindex);
                    layer.msg(data.msg, {icon: 6, title: "系统提示："});
                    alert(data.msg);
                    window.location.href="/onlinebank.html";
                    $scope.form = {
                        payeeAccount: "",//收款银行卡
                        payerAccount: "",//付款银行卡
                        syh: "", fyh: "",
                        tradingAmount: "",//金额
                        idcard: "",
                        name: "",//姓名
                        phone: "",
                        payPwd:"",
                        phoneCode:""
                    }
                }
            })
        }

        //获取银行卡list
        $scope.getcardlist = function () {
            $http.post("http://localhost:12000/onli/obc/cardlist", obid).success(function (data) {
                $scope.clist = data.data
            })
        }

        //收款银行卡
        $("#payerAccount").change(function () {
            var yhk = $('#payerAccount option:selected').val();
            $scope.form.payerAccount=yhk;
            $http.post("http://localhost:12000/onli/obc/cardlist2",

                $.param({obid: obid, card: yhk})
                , {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
            ).success(function (data) {
                $scope.clist2 = data.data
            })
            $http.post('http://localhost:12000/tran/account', yhk).success(function (data) {  //正确请求成功时处理
                //console.log(data);
                $scope.form.fyh = data.data;
                $("#fyh").css("border", "1px green solid");
            })
        });

        //付款银行卡
        $("#payeeAccount").change(function () {
            var yhk = $('#payeeAccount option:selected').val();
            $scope.form.payeeAccount=yhk;
            $http.post('http://localhost:12000/tran/account', yhk).success(function (data) {  //正确请求成功时处理
                //console.log(data);
                $scope.form.syh = data.data;
                $("#syh").css("border", "1px green solid");
            })
        })

        //身份信息验证
        $("#name").change(function () {
            var idc = $("#idcard").val();
            var uname = $("#name").val();

            if (idc == "") {
                $("#idcard").css("border", "1px red solid");
                $("#name").val("");
            } else {
                $http.post('http://localhost:12000/onli/ob/idcard',
                    $.param({ic: idc, name: uname})
                    ,{headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
                ).success(function (data) {  //正确请求成功时处理
                    if(data.code==200){
                        var jsonobj=JSON.parse(data.data);
                        console.log(jsonobj)

                        if (jsonobj.status == "01") {
                            //console.log(data.data);
                            layer.close(layerindex);
                            layer.msg(jsonobj.msg,{icon:6,title:"系统提示："});
                            $("#idcard").css("border", "1px green solid");
                            $("#name").css("border", "1px green solid");
                        } else {
                            layer.close(layerindex);
                            layer.msg(jsonobj.msg,{icon:5,title:"系统提示："});
                            $("#idcard").css("border", "2px red solid");
                            $("#name").css("border", "2px red solid");
                            $("#idcard").val("");
                            $("#name").val("");

                        }
                    }else{
                        layer.close(layerindex);
                        layer.msg(data.msg,{icon:6,title:"系统提示："});
                    }

                })
            }
        })

        //手机号验证
        $("#sjh").click(function () {
            var myphone=$("#phone").val();
            if(myphone==""){
                $("#phone").css("border", "2px red solid");
            }else{
                $http.get('http://localhost:12000/tran/phone?phone='+myphone).success(function (data) {  //正确请求成功时处理
                    console.log(data);
                    $("#phone").css("border", "1px green solid");
                })
            }
        })

        //手机验证码
        $("#phoneCode").change(function () {
            var code=$("#phoneCode").val();
            var myphone=$("#phone").val();

            if(myphone==""){
                alert("请输入手机号")
            }else{
                $http.get('http://localhost:12000/tran/smscode?phone='+myphone+"&code="+code).success(function (data) {  //正确请求成功时处理
                    console.log(data);
                    if(data.code==200){
                        $("#phoneCode").blur();
                        $("#phoneCode").css("border", "1px green solid");
                    }else{
                        layer.close(layerindex);
                        layer.msg(data.msg,{icon:6,title:"系统提示："});
                        $("#phoneCode").val("");
                        $("#phoneCode").focus();

                    }
                })
            }


        })

        //判断余额
        $("#tradingAmount").blur(function () {
            var amount = $("#tradingAmount").val();

            if(amount=="") {
                $("#tradingAmount").css("border", "2px red solid");
            }else{
                $("#tradingAmount").css("border", "1px green solid");
                $http.post('http://localhost:12000/onli/obc/amount',
                    $.param({amount: $scope.form.tradingAmount, account: $("#payerAccount").val()}),
                    {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}}
                ).success(function (data) {  //正确请求成功时处理
                    console.log(data);
                    if (data.code != 200) {

                        $("#tradingAmount").css("border", "2px red solid");
                        $("#submit").attr("disabled", true);
                    } else {
                        $("#tradingAmount").css("border", "1px green solid");
                        $("#submit").attr("disabled", false);
                    }

                })
            }
        });

        //支付密码
        $("#payPwd").change(function () {
            if($("#payPwd").val()==""){
                $("#payPwd").css("border", "2px red solid");
            }else {
                $("#payPwd").css("border", "1px green solid");
            }
        })


    });


    $(function () {

        $('#b2').click(function () {
            $('#myModal').modal('hide')
        })

        //验证码
        var show_num = [];
        draw(show_num);
        $("#canvas").on('click', function () {
            draw(show_num);
        })
        $("#yzm").change(function () {
            var val = $("#yzm").val().toLowerCase();

            var num = show_num.join("");
            if (val == '') {
                alert('请输入验证码！');
            } else if (val == num) {
                $("#yzm").css("border", "1px green solid");
                $("#yzm").blur();
                $("#submit").attr("disabled",false);
                //$(".input-val").val('');
                // draw(show_num);
            } else {
                $("#yzm").css("border", "2px red solid");
                $(".input-val").val('');
                $("#submit").attr("disabled",true);
                $("#yzm").focus();
                // draw(show_num);
            }

        })

        //所有验证不为空
        function info() {
            var yhk = $('#payerAccount option:selected').val()
            var yhk2 = $('#payeeAccount option:selected').val()
            var s3 = $("#tradingAmount").val();
            var s4 = $("#name").val();
            var s5 = $("#idcard").val();
            var s6 = $("#phone").val();
            var s7 = $("#sjyzm").val();
            var s8 = $("#payPwd").val();
            if (yhk == "" || yhk2 == "" || s3 == "" || s4 == "" || s5 == ""||s6 == ""||s7 == ""||s8 == "") {
                alert("账户信息未填写，请填写！")
            } else {
                $('#myModal').modal('show')
            }
        }

        $("#submit").on('click', function () {
            info();

        })

    });

</script>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">注册账户汇款转账</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center;color: red;"><h2>请确认进行账户转账操作吗？</h2></div>
                <div class="panel-body">
                    <div class="col-md-9 col-md-offset-1">
                        <div class="form-group">
                            <div class="form-group">
                                <a class="btn btn-danger col-sm-offset-2 col-md-4" id="b1"
                                   ng-click="pay()" value="" data-toggle="modal" data-target="#myModal"
                                   type="submit">确认</a>
                            </div>
                            <div class="form-group">
                                <a class="btn btn-warning col-sm-offset-2 col-md-4" id="b2"
                                   href="" type="button" data-dismiss="modal">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>